<template>
	<Cascader class="common-component-select_area" :disabled="disabled" :data="areaData" :value="computedValue" @on-change="handleChange"/>
</template>

<script>
export default {
	name: 'SelectArea',

	props: ['value', 'disabled'],

	data (){
		return {
			selectedValue: undefined,
			areaData: require('@/assets/shandong.json')
		}
	},

	computed: {
		computedValue ({value}){
			return value?.split('/');
		}
	},

	methods: {
		handleChange (value, selectData){
			this.$emit('input', value?.join('/'));
		}
	}
}
</script>

<style lang="scss" scoped>
.common-component-select_area {
}
</style>
